<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:100px;height:100px;background: red;position: absolute;left:1000px;top:0;}
    .line{width: 1px;height: 400px;position: absolute;left:400px;background: black;}
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="line"></div>
</body>
<script>

  const box = document.querySelector(".box")

  const target = 400;
  
  let t = setInterval(()=>{
    // 步长：(目标 - 当前)的n分之一
    // 因为步长的计算处于计时器中，在计时器中，当前值，在不断变大，剩下的距离不断变小，实现了步长不断变小的目的
    let speed = (target - box.offsetLeft) / 7;
    // 根据正负决定向上或向下取整
    speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
    // 因为缓冲运动，最终必然是1像素1像素的往前走，所以必然可以绝对等于目标
    if( target === box.offsetLeft ){
      clearInterval(t);
    }else{
      box.style.left = box.offsetLeft + speed + "px";
    }
  }, 30);
  
</script>
</html>